//封装弹框，拆分
import PropTypes from "prop-types";
import "@/assets/style.scss";
import { useState } from "react";

function Button(props){
    let {type,children,onClick} = props;
    return(
        <div className="ml-button">
            <span className={type} onClick={onClick}>{children}</span>
        </div>
    )
}

Button.propTypes = {
    type:PropTypes.oneOf(['default','primary','danger','info']),
    children:PropTypes.node,
    onClick:PropTypes.func
}
Button.defaultProps = {
    type:'default',
    children:'按钮',
    onClick:()=>{}
}

function ModalHeader(props){
    let {title,closable,onCancel} = props;
    return(
        <div>
            <div>{title}</div>
            <div onClick={onCancel}>{closable&&"X"}</div>
        </div>
    )
}

function ModalFooter(props){
    let {footer} = props;
    return(footer())
}

function Modal(props){
    let {children,visiable,onCancel} = props;
    let handerLayer=(e)=>{
        if(e.target.dataset.self){
            onCancel()
        }
    }
    return(
        <div 
            className="ml-layer"
            style={{display:visiable?'block':'none'}}
            data-self="layer"
            onClick={handerLayer}
        >
            <div className="ml-modal">
                <header>
                    {/* 叫props穿透 */}
                    <ModalHeader {...props}></ModalHeader>
                </header>
                <main>
                    {children}
                </main>
                <footer>
                    <ModalFooter {...props}></ModalFooter>
                </footer>
            </div>
        </div>
    )
}

Modal.propTypes = {
    title:PropTypes.elementType,
    closable:PropTypes.bool,
    type:PropTypes.oneOf(['confirm','danger','info']),
    children:PropTypes.node,
    visiable:PropTypes.bool,
    onCancel:PropTypes.func,
    footer:PropTypes.func,
    onOk:PropTypes.func

}
Modal.defaultProps = {
    title:'默认小标题',
    closable:true,
    type:'info',
    children:<div>主体内容默认值</div>,
    visiable:false,
    onCancel:()=>{},
    footer:()=>{},
    onOk:()=>{}
}

function PageA(){
    //定义一个状态控制弹窗是否显示
    let [visiable,setVisiable] = useState(false);
    let submit = ()=>{
        setTimeout(()=>{
            setVisiable(false)
        },300)
    }
    return(
        <div>
            <button onClick={()=>setVisiable(true)}>open modal</button>
            {/* 如果一个props是一个事件函数，建议用on打头 */}
            <Modal
                title={'添加用户'}
                closable
                type="confirm"
                footer={
                    ()=>{
                        return[
                            <Button type="danger" key="1" onClick={()=>setVisiable(false)}>残忍离开</Button>,
                            <Button type="primary" key="2">确定</Button>
                        ]
                    }
                }
                visiable={visiable}
                onCancel={()=>setVisiable(false)}
                onOk={submit}
            >
                <div>
                    <input type="text" />
                    <div>你确定要添加此用户吗?</div>
                </div>
            </Modal>
        </div>
    )
}

export default PageA; 